<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('礼物列表')"/>
    <style>
        #exchangeModal .modal-dialog {
            width: 500px; /* 适当调整宽度 */
            height: 400px; /* 设置弹窗高度 */
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>礼物名称：</label>
                            <input type="text" name="giftName"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>

<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:gift:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:gift:remove')}]];
    var prefix = ctx + "system/gift";
    $(function () {
        var options = {
            url: prefix + "/list",
            changeUrl: prefix + "/edit/{id}",
            modalName: "礼物",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'index',
                    title: '序号',
                    formatter: function (value, row, index) {
                        return index + 1; // 表格的索引从0开始，因此加1
                    }
                },
                {
                    field: 'giftName',
                    title: '礼物名称'
                },
                {
                    field: 'giftScore',
                    title: '礼物兑换所需积分'
                },
                {
                    field: 'status',
                    title: '礼物状态',
                    formatter: function (value, row, index) {
                        return value === 0 ? '上架' : '下架'; // 根据值显示相应的文本
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    field: 'giftStock',
                    title: '礼品库存'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="openExchangeModal(' + row.id + ')"><i class="fa fa-edit"></i>兑换</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        // 获取兑换礼物列表
        $.ajax({
            url: prefix + "/list",
            type: "POST",
            success: function (data) {
                if (data && data.rows && Array.isArray(data.rows)) {  // 首先检查数据的整体结构和 rows 是否为数组
                    var select = $('#giftSelect');
                    select.empty();
                    data.rows.forEach(function (item) {  // 使用 forEach 遍历 rows 数组
                        select.append($('<option>', {
                            value: item.id,
                            text: item.giftName
                        }));
                    });
                }
            }
        });
    });

    // 打开兑换弹窗的函数
    function openExchangeModal(giftId) {
        $('#exchangeModal').modal('show');
    }

    // 确认兑换的函数
    // 确认兑换的函数
    function confirmExchange() {
        var giftId = $('#giftSelect').val();
        console.log("giftId:", giftId);
        var mobile = $('#mobileInput').val();
        console.log("mobile:", mobile);
        $.ajax({
            url: prefix + "/change/doChange",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify({giftId: giftId, mobile: mobile}),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log("data=====", data);
                $('#exchangeModal').modal('hide');  // 关闭兑换弹窗


                // 先移除可能存在的旧的提示弹窗
                if ($('#alertModal').length) {
                    $('#alertModal').remove();
                }
                // 创建提示弹窗
                var message = data.message;
                var alertModal = $('<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel">' +
                    '<div class="modal-dialog" role="document">' +
                    '<div class="modal-content">' +
                    '<div class="modal-header">' +
                    '<h5 class="modal-title" id="alertModalLabel">提示</h5>' +
                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>' +
                    '<div class="modal-body">' + message + '</div>' +
                    '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>');
                $('body').append(alertModal);
                $('#bootstrap-table').bootstrapTable('refresh');
                $('#alertModal').modal('show');
            },
            error: function (data) {
                console.log("error=====", data);
                $('#exchangeModal').modal('hide');  // 关闭兑换弹窗
                // 创建提示弹窗
                var message = '兑换请求发送失败，请稍后重试！';
                var alertModal = $('<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="alertModalLabel">提示</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">' + message + '</div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">确定</button></div></div></div>');
                $('body').append(alertModal);
                $('#bootstrap-table').bootstrapTable('refresh');
                $('#alertModal').modal('show');
            }
        });
    }
</script>

<!-- 兑换弹窗 -->
<div class="modal fade" id="exchangeModal" tabindex="-1" role="dialog" aria-labelledby="exchangeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exchangeModalLabel">礼物兑换</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="height: 300px">
                <form class="form-horizontal m" id="form-gift-add">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">会员手机号：</label>
                        <div class="col-sm-8">
                            <input type="text" id="mobileInput" name="mobile" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">兑换礼物：</label>
                        <div class="col-sm-8">
                            <select id="giftSelect" name="giftId" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="confirmButton" onclick="confirmExchange()" class="btn btn-primary">确认兑换
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>